<template>
	<view class="container">
<!-- 导航栏 -->
<view class="tabbar">
	<text>我的</text>
</view>
		<view class="user-section">
			<view class="user-info-box" @click="handleUserInfoBoxClick()">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.avatar || '/static/missing-face.png'"></image>
				</view>
				<view class="info-box">
					<text class="username" v-if="userInfo">{{ userInfo.userName }}</text>
					<text class="username" v-else>点击登录</text>
					<text class="phone">{{ userInfo.phonenumber }}</text>
				</view>
				<view class="icon-chat-filled" @click="navTo('/pages/notice/notice')">
					<uni-icons type="chat" size="30" color="white"></uni-icons>
				</view>
			</view>
		</view>
		

		<view class="cover-container" :style="[{
				transform: coverTransform,
				transition: coverTransition
			}]" @touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend">

			<view class="tj-sction-test">
				<view class="tj-item">
					<text class="kj-view">余额 </text>

					<text class="num" >{{balance.dataCoin||0}} <text style="font-size: 12px; margin-left: 10px;">积分</text></text>
				</view>
				<view class="button-v">
					<button class="button-cz" @click="natorecharge()">充值</button>
				</view>
			</view>

			<view class="tj-sction-test">
				<view class="tj-item">
					<text class="kj-view" style="margin-left: -40px;">重要数据存储空间</text>
					<text class="num">{{space.usedSpace||0}} <text style="font-size: 12px; margin-left: 10px;margin-right: 20px;">GB</text> / {{space.space||0}} <text style="font-size: 12px; margin-left: 10px;">GB</text></text>
				</view>
				<view class="kj-view">
					<text>空间管理</text>
					<uni-icons type="forward" size="10" color="#fff"></uni-icons>
				</view>
			</view>
			<!-- 资产 -->
			<view class="tj-sction-card" >
				<view class="little-card" @click="navTo('/pages/asset/digitalAssets')">
					<text>数据资产</text>
					<view class="img-card">
						<uni-icons type="wallet-filled" size="25" color="#efc21f"></uni-icons>
					</view>

				</view>
				<view class="little-card" @click="navTo('/pages/equity/equity')">
					<text>数权账户</text>
				<view class="img-card">
					<uni-icons type="wallet-filled" size="25" color="#efc21f"></uni-icons>
				</view>
				</view>
			</view>

					

			<view class="history-section">
				<list-cell title="共享申请单审核" @eventClick="navTo('/pages/order/checkedOrder')" ></list-cell>
				<list-cell title="我的共享申请单" @eventClick="navTo('/pages/order/order')"></list-cell>
				<list-cell title="我的数据资产" @eventClick="navTo('/pages/asset/digitalAssets')"></list-cell>
				<list-cell title="共享数据袋" @eventClick="navTo('/pages/dataBag/dataBag')"></list-cell>
        <list-cell title="数据交易日志" @eventClick="navTo('/pages/user/datalog')"></list-cell>
				<list-cell title="我的通讯录" @eventClick="navTo('/pages/contacts/contacts')"></list-cell>
				<list-cell title="设置" border="" @eventClick="navTo('/pages/set/set')"></list-cell>
			</view>
		
		</view>


	</view>
</template>
<script>
	import listCell from '@/components/mix-list-cell';
	import {getwallet,getuserDrinfo} from '@/api/user.js';
	import {getUserInfo} from '@/api/right.js'
	import {
		mapState
	} from 'vuex';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			listCell
		},
		data() {
			return {
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				balance:null,
				space:null,
			}
		},
		onLoad() {
			this.loadData();
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/set/set');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		},
		// #endif
		computed: {
			...mapState([ 'userInfo','hasLogin']),
			
		},
		methods: {
			loadData() {	
				// getUserInfo().then(res=>{
				// 	if(res.code===200){
				// 		console.log(res);
				// 		this.userInfo=res.user;
				// 	}
				// })
				// getuserDrinfo().then(res=>{
				// 	if(res.code===200){
				// 		console.log(res);
				// 		// console.log('userinfo',this.userInfo);
				// 		this.space=res.data;
				// 		this.$store.commit('setSpaceData', res.data)
				// 	}
				// })
				// getwallet().then(res=>{
				// 	if(res.code===200){
				// 		console.log(res);
				// 		this.balance=res.data;
				// 	}
				// })
			},



			handleUserInfoBoxClick() {
				if (this.hasLogin===false) {
					// 如果用户未登录，跳转到登录页面
					this.navTo('/pages/public/login');
				} else {
					this.loadData();
							
				}
			},
			natorecharge() {
				uni.navigateTo({
					url: `/pages/user/recharge`
				})
			},
			
			navTo(url) {
				// if (!this.hasLogin) {
				// 	url = '/pages/public/login';
				// }
				uni.navigateTo({
					url
				})
			},

			
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}

				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			}
		}
	}
</script>
<style lang='scss'>
	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	page {
		
	}
	
	
	.tabbar{
		font-size: 38upx;
		color: white;
		margin: 15upx 0  0 30upx;
	}
	
	.icon-chat-filled {
		width: 80upx;
		height: 80upx;
	    position: absolute; /* 设置图标盒子为绝对定位 */
	    top: 0;
	    right: 0;
		background-color: rgba(#9E9DBA, 0.5);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	
	.user-section {
		height: 300upx;
		padding: 30upx 25upx 0;
		position: relative;
		margin-bottom: 20upx;
		
		.user-info-box {
			position: relative; /* 设置外部盒子为相对定位 */
			display: flex;
			align-items: center;
			position: relative;
			z-index: 1;
			margin-bottom: 20upx;
			

				.portrait {
					width: 120upx;
					height: 120upx;
					border: 5upx solid #fff;
					border-radius: 50%;
				}
			
		

			
			.info-box{
				display: flex;
				flex-direction: column;
				margin-left: 20upx;
			.username {
				font-size: $font-base +15upx;
				color: #fff;
				margin-bottom: 15upx;
			}
					
			.phone {
				color: darkgray;
				font-size: $font-lg - 5upx;
			}	
			}
		
		
		}
	
	}

	

	.cover-container {
		margin-top: -150upx;
		padding: 10upx 20upx ;
		position: relative;

		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
		
		.tj-sction-test {
			@extend %section;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15upx;
			background-color: rgba(#9E9DBA, 0.2);
			
			padding: 10upx 40upx 10upx 0;
			.tj-item {
				@extend %flex-center;
				flex-direction: column;
				font-size: $font-sm;
				color: #eff6ff;
				height: 120upx;
				padding-left: 20upx;
			}
			
		
			
			.button-cz{
				background:linear-gradient(to right,#5eba8f,#3ba9b3) ;
				color: #fff;
				height: 55upx;
				width: 150upx;
				line-height: 55upx;
				border-radius: 25upx;
				font-size: $font-base;
				
			}
			.num {
				font-size: $font-lg +8upx;
				color: #eff6ff;
				margin-bottom: 8upx;
				
			}
			.kj-view{
				color: #c7c7c7;
				font-size: 20upx;
			}
		
		}
	}


	
	.tj-sction-card{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12upx;
		.little-card{
			width: 328upx;
			height: 120upx;
			margin-right: 10upx;
			padding:15upx 0 0 15upx;
			color: #eff6ff;
		    background-color: rgba(#9E9DBA, 0.2);
			border-radius: 5%;
		
			
			.img-card{
			display: flex;
			justify-content: flex-end;
			padding: 0 10upx 0 0;
		
			

			}
			
		}
		.num {
			font-size: $font-lg;
			color: #eff6ff;
			margin-bottom: 8upx;
		}
	}




	.tj-sction {
		@extend %section;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}

		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}

	.history-section {
		padding:0;
		margin-top: 20upx;
		border-radius: 10upx;
		background-color: rgba(#9E9DBA, 0.2);
		.sec-header {
			display: flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;

			.yticon {
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}

		.h-list {
			white-space: nowrap;
			padding: 0 30upx 0;

			image {
				display: inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}

	}

</style>